//DOM元素节点访问
console.log("=========")
console.log(document.head)
console.log("=========")
console.log(document.body)
console.log("=========")
console.log(document.links)//页面中所有链接
console.log("=========")
console.log(document.images)//页面中所有图片
console.log("=========")
console.log(document.forms)//页面中所有表单元素
console.log("=========")
console.log(document.getElementById("p1"))//按照标签的ID获取元素，应该是唯一的
console.log("=========")
console.log(document.getElementsByName("text"))//获取页面中所有指定name属性的值
console.log("=========")
console.log(document.getElementsByClassName("link"))//获取页面中所有指定class属性的值
console.log("=========")
console.log(document.getElementsByTagName("img"))//获取页面中所有指定标签的元素集合
console.log("=========")
console.log(document.querySelector("h1"))//获取页面中符合指定css选择器的第一个元素
console.log("=========")
console.log(document.querySelectorAll("li"))//获取页面中符合指定css选择器的所有元素集合

//DOM元素节点的操作<p id="one" title="文字">段落内容</P>
//创建元素节点
var p =document.createElement("p");
console.log(p)
p.setAttribute("id","on");//设置属性节点

//创建文本节点
var pTextNode = document.createTextNode("创建文本")
p.appendChild(pTextNode);

//创建属性节点
var pTitleAttrNode = document.createAttribute("title")
pTitleAttrNode.value ="鼠标提示信息：动态创建的文本段落标签p";
p.setAttributeNode(pTitleAttrNode);

document.body.appendChild(p);
document.body.insertBefore(p.cloneNode(true),document.body.firstChild);

let myBox=document.getElementById("box")
//元素（HTMLElement）操作
myBox.append("张三");
myBox.appendChild(p.cloneNode(true));
console.log("=========")
console.log(myBox.children)//当前元素节点的子元素节点
console.log("=========")
console.log(myBox.firstElementChild)//当前元素节点的子元素节点
console.log("=========")
console.log(myBox.firstElementChild.nextElementSibling)//当前元素节点的子元素节点
console.log("=========")
console.log(myBox.lastElementChild.previousElementSibling)//当前元素节点的子元素节点
console.log("=========")
console.log(myBox.innerHTML)//当前元素节点的子元素节点
console.log("=========")
console.log(myBox.outerHTML)
console.log("=========")
console.log(myBox.innerText)
console.log("=========")
console.log(myBox.outerText)
console.log("=========")
console.log(myBox.textContent)
console.log("=========")
console.log(myBox.outerText)

let myContent = document.getElementById("content")
// myContent.querySelector("p").remove();//移除元素节点
// myContent.removeChild(myContent.lastElementChild);//移除指定子元素节点
myContent.append("last")
myContent.prepend("first")

if(myContent.hasAttributes()){
    let attrs=myContent.attributes;
    for(let i=0;i<attrs.length;i++){
        const element=attrs[i];
        console.log(`${element.name}:${element.value}`)
    }
}

//操作属性
// myContent.setAttribute("class","b");
myContent.className="b";
myContent.classList.add("c")
myContent.classList.remove("c")